<template>
  <div class="main">
 
 <div class="componentsss">
   <component :is="currentComponent"></component>
 </div>
 <div class="mainbottom">
   <button @click="changebg(item,index)" v-for="(item, index) in ButtonGroup" :key="index"  :class="{ isSetted: currentInde === index}">
     <!-- <span> {{ item.iconname }}</span> -->
     <div>{{ item.name }}</div>
   </button>
 </div>
</div>
</template>
<script setup>
import Log_serverView from './components/Log_serverView.vue';
import Call_logingView from './components/Call_logingView.vue';
import Device_logingView from './components/Device_logingView.vue';
import Voice_logingView from './components/Voice_logingView.vue';
import { ref } from 'vue'
const currentComponent=ref(Log_serverView);
const ButtonGroup =ref([
    {
        name:"服务器日志",
        currentComponent:Log_serverView
    },
    {
        name:"寻呼台日志",
        currentComponent:Call_logingView
    },
    {
        name:"设备日志",
        currentComponent:Device_logingView
    },
    {
        name:"语音日志",
        currentComponent:Voice_logingView
    }
])
const currentInde=ref(0);
const changebg=(item,index)=>{
    currentInde.value=index;
    currentComponent.value=item.currentComponent
}
</script>
<style scoped>
@import url('./log_management.less');
</style>